<template>
  <div>
      <div class="fenlei-box">
        <div class="bg-box">
          <span class="iconfont icon-right-arrow"></span>
        </div>
        <div class="img-box">
          <img :src="fenleiObj.icon" alt="无图" />
          <span>#{{ fenleiObj.catename }}#</span>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  props: {
    fenleiObj: {
      type: Object,
    },
  },
  name: "Fenlei"
};
</script>

<style lang="scss" scoped>
.fenlei-box {
  position: relative;
  width: 272px;
  height: 182px;
  overflow: hidden;
  cursor: pointer;
  &:hover {
    .img-box {
      transform: translateX(-44px);
      transition: all 0.2s linear;
    }
  }
  .bg-box {
    width: 100%;
    height: 100%;
    background-color: #3498db;
    position: absolute;
    span {
      width: 20px;
      height: 20px;
      font-size: 24px;
      font-weight: bold;
      color: #fff;
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .img-box {
    position: absolute;
    z-index: 99;
    transition: all 0.2s linear;
    img {
      width: 272px;
      height: 182px;
    }
    span {
      position: absolute;
      color: #fff;
      font-size: 20px;
      font-weight: bold;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.7);
      letter-spacing: 2px;
    }
  }
}
</style>